<meta name="csrf-token" content="{{ csrf_token() }}">

<style type="text/css">
    .canv{
        height:400px;
        width:auto;
    }
</style>

<div id="page-wrapper">
    <script src="{{URL::asset('js/echarts.js')}}"></script>
    <script>
        $(document).ready(function(){
            $('#btn_submit').click();
        });
        $('#btn_submit').on('click',function(){
            if(!($('#section').val() > 0)){
                alert('请选择班段！');
                return;
            }
            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
            var request = {};
            request.year = $('#year').val();
            request.term = $('#term').val();
            request.start_time = $('#start_time').val();
            request.end_time = $('#end_time').val();
            request.section = $('#section').val();
            $.post('report/submit',request,function(data){
                $('.out').each(function(){
                    $(this).css('display','block');
                });
                var title=[];
                var jx=[];
                var kq = [];
                var zy = [];
                var lost = [];
                for(i in data.group){
                    title.push(data.group[i].name);
                    kq.push(data.group[i].kq);
                    jx.push(data.group[i].jx);
                    zy.push(data.group[i].zy);
                    lost.push(data.group[i].lost_num);
                }
                //考勤分组
                var kq_group = document.getElementById('kq_group');
                var myChart1 = echarts.init(kq_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: kq,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart1.setOption(option);

                //家校分组
                var jx_group = document.getElementById('jx_group');
                var myChart2 = echarts.init(jx_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: jx,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart2.setOption(option);

                //作业分组
                var jx_group = document.getElementById('zy_group');
                var myChart3 = echarts.init(jx_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: zy,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart3.setOption(option);

                //流失分组
                var jx_group = document.getElementById('lost_group');
                var myChart4 = echarts.init(jx_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: lost,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart4.setOption(option);

//=======================================================================================================================================
                //按班型
                var title=[];
                var jx=[];
                var kq = [];
                var zy = [];
                var lost = [];
                i = 0;
                for(i in data.type){
                    title.push(data.type[i].name);
                    kq.push(data.type[i].kq);
                    jx.push(data.type[i].jx);
                    zy.push(data.type[i].zy);
                    lost.push(data.type[i].lost_num);
                }
                //考勤班型
                var kq_group = document.getElementById('kq_type');
                var myChart5 = echarts.init(kq_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: kq,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart5.setOption(option);

                //家校班型
                var jx_group = document.getElementById('jx_type');
                var myChart6 = echarts.init(jx_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: jx,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart6.setOption(option);

                //作业班型
                var jx_group = document.getElementById('zy_type');
                var myChart7 = echarts.init(jx_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: zy,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart7.setOption(option);

                //流失班型
                var jx_group = document.getElementById('lost_type');
                var myChart8 = echarts.init(jx_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: lost,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart8.setOption(option);


//=======================================================================================================================================
                //按开班批次
                var title=[];
                var jx=[];
                var kq = [];
                var zy = [];
                var lost = [];
                i = 0;
                for(i in data.batch){
                    title.push(data.batch[i].name);
                    kq.push(data.batch[i].kq);
                    jx.push(data.batch[i].jx);
                    zy.push(data.batch[i].zy);
                    lost.push(data.batch[i].lost_num);
                }
                //考勤批次
                var kq_group = document.getElementById('kq_batch');
                var myChart9 = echarts.init(kq_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title,
                        "axisLabel":{
                            interval: 0
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: kq,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart9.setOption(option);

                //家校批次
                var jx_group = document.getElementById('jx_batch');
                var myChart10 = echarts.init(jx_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title,
                        "axisLabel":{
                            interval: 0
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: jx,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart10.setOption(option);

                //作业批次
                var jx_group = document.getElementById('zy_batch');
                var myChart11 = echarts.init(jx_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title,
                        "axisLabel":{
                            interval: 0
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: zy,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart11.setOption(option);

                //流失批次
                var jx_group = document.getElementById('lost_batch');
                var myChart12 = echarts.init(jx_group,'light');
                option = {
                    xAxis: {
                        type: 'category',
                        data: title,
                        "axisLabel":{
                            interval: 0
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: lost,
                        type: 'bar',
                        label: {
                            normal: {
                                position: 'top',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                    }]
                };
                myChart12.setOption(option);
            });
        });
    </script>
</div>


<div style="display:none" class="out">
    <h2>全勤率</h2>
    <h3>按阶段</h3>
    <div id="kq_group" class="canv"></div>
    <h3>按班型</h3>
    <div id="kq_type" class="canv"></div>
    <h3>按开班批次</h3>
    <div id="kq_batch" class="canv"></div>
</div>
<div style="display:none" class="out">
    <h2>家校准交率</h2>
    <h3>按阶段</h3>
    <div id="jx_group" class="canv"></div>
    <h3>按班型</h3>
    <div id="jx_type" class="canv"></div>
    <h3>按开班批次</h3>
    <div id="jx_batch" class="canv"></div>
</div>
<div style="display:none" class="out">
    <h2>作业准交率</h2>
    <h3>按阶段</h3>
    <div id="zy_group" class="canv"></div>
    <h3>按班型</h3>
    <div id="zy_type" class="canv"></div>
    <h3>按开班批次</h3>
    <div id="zy_batch" class="canv"></div>
</div>
<div style="display:none" class="out">
    <h2>流失人数</h2>
    <h3>按阶段</h3>
    <div id="lost_group" class="canv"></div>
    <h3>按班型</h3>
    <div id="lost_type" class="canv"></div>
    <h3>按开班批次</h3>
    <div id="lost_batch" class="canv"></div>
</div>